<script>
  import sheep from '@/sheep';

  export default {
    name: 'headerTitle',
    data() {
      return {
        // statusBarHeight: 0
        is_featured: false,
        featured_list: [
          { name: '添加亲友', image: 'addFriendsAndRelatives.png' },
          { name: '扫一扫', image: 'sweep.png', path: '' },
          { name: '今日运势', image: 'yourHoroscopeToday.png' },
          { name: '我的二维码', image: 'myQRCode.png' },
          { name: '家庭小帮手', image: 'chat_tips_icon_background.png' },
        ],
      };
    },
    props: {
      // 头部标签
      title: {
        type: String,
        default: '',
      },
      // 是否显示返回按钮
      isDisplayBack: {
        type: Boolean,
        default: false,
      },
      // 是否触发点击事件
      isClick: {
        type: Boolean,
        default: false,
      },
      isFixed: {
        type: Boolean,
        default: false,
      },
      background: {
        type: String,
        default: 'transparent',
      },
      zIndex: {
        type: [Number, String],
        default: 1,
      },
      isShowHome: {
        type: Boolean,
        default: false,
      },
      isShowNewsIcon: {
        type: Boolean,
        default: false,
      },
      titleColor: {
        type: String,
        default: '#000000',
      },
      title_click: {
        type: Boolean,
        default: false,
      },
      showFIcon: {
        type: Boolean,
        default: false,
      },
      showAddIcon: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      systemInfo() {
        return sheep.$platform.device;
      },
      token() {
        return sheep.$store('user').isLogin;
      },
    },
    mounted() {
      this.getPageHeight();
    },
    methods: {
      // 获取元素的高度
      getPageHeight() {
        const query = uni.createSelectorQuery().in(this);
        query.select('.headerTitle').boundingClientRect(data => {
          this.$emit('getPageHeight', data.height);
        }).exec();
      },
      backNav() {
        uni.navigateBack();
      },
      headerClick() {
        if (!!this.isClick) {
          this.$emit('headerClick');
        }
      },
      titleClick() {
        if (!this.title_click) {
          return;
        }
        this.$emit('titleClick');
      },
      goToHome() {
        if (!this.isShowHome) {
          return;
        }
        uni.switchTab({
          url: '/pages/message/matchmaking',
        });
      },
      goMessage() {
        this.$nav.navigateTo('/pages/message/index/index');
      },
      openFeatured() {
        this.is_featured = true;
        uni.$emit('showShare', true);
        uni.$once('closeFeatured', () => {
          this.is_featured = false;
        });
      },
      closeFeatured() {
        uni.$emit('closeFeatured');
        uni.$emit('showShare', false);
      },
      goToPath(index) {
        if (!this.token) {
          // #ifdef MP
          this.$nav.navigateTo('/pages/users/wechat_login/index');
          // #endif
          // #ifndef MP
          this.$nav.navigateTo('/pages/users/login/index');
          // #endif
          return;
        }
        switch (index) {
          case 1:
            uni.scanCode({
              success: (res) => {
                console.log(res);
              },
            });
            this.closeFeatured();
            return;
          case 0:
            this.$nav.navigateTo('/pages/relativesFriendsPage/addFriends/addFriends');
            this.closeFeatured();
            return;
          case 3:
            this.$nav.navigateTo('/pages/users/user_spread_code/index');
            this.closeFeatured();
            break;
          case 2:
            this.$nav.navigateTo('/pages/familyAnniversary/anniversariesList', {
              index: 2,
            });
            this.closeFeatured();
            break;
          case 4:

            this.$nav.navigateTo('/pages/AI/AIMarketplace/AIMarketplace');
            this.closeFeatured();
            break;
        }
      },
    },
  };
</script>

<template>
  <view class="headerTitle flex align-center justify-center" :class="{
    fixeds:isFixed
  }" :style="{
    paddingTop:`calc(${systemInfo.statusBarHeight}px + 10rpx)`,
    background: background,
    zIndex:zIndex,
  }">
    <view class="headerTitle_content  flex align-center justify-center" @click.stop="headerClick">
      <image v-if="isDisplayBack && !showFIcon" :src="`${IMG_URL}/index/left5.png?x-oss-process=image/resize,w_44,h_44`"
             class="headerTitle_image" @click.stop="backNav" />
      <image v-if="isDisplayBack && showFIcon" :src="`${IMG_URL}/index/left5_ffffff.png?x-oss-process=image/resize,w_44,h_44`"
             class="headerTitle_image" @click.stop="backNav" />
      <view class="headerTitle_content_messageIcon  flex flex-column align-center" v-if="isShowNewsIcon" @click.stop="goMessage">
        <image class="headerTitle_content_messageIcon_image"
               :src="`${IMG_URL}notice.png?x-oss-process=image/resize,w_44,h_44`"></image>
      </view>
      <view class="headerTitle_content_home flex align-center" v-if="!!isShowHome" @click.stop="goToHome">
        <image class="headerTitle_content_home_image" :src="`${IMG_URL}/index/genealogy_select.png`"></image>
        <text class="headerTitle_content_home_text ml_4">进入首页</text>
      </view>
      <view class="headerTitle_text flex align-center" style="position: relative;" :style="{
        color:`${titleColor} !important`
      }" @click.stop="titleClick">
        <slot name="follow"></slot>
        {{ title }}
        <slot name="specialMark"></slot>
      </view>
      <slot></slot>

      <view class="addIcon" v-if="showAddIcon">
        <image :src="`${IMG_URL}shouye_icon_all_list.png`" style="width: 38rpx;height: 38rpx;"
               @click.stop="openFeatured"></image>
        <view class="tips_popup flex flex-column align-center" v-if="is_featured">
          <view class="list flex align-center justify-between" v-for="(item,index) in featured_list" :key="index"
                @click.stop="goToPath(index)">
            <image :src="`${IMG_URL}${item.image}`"></image>
            <view class="title" :style="{
              borderBottom: index == featured_list.length - 1 ? 'none' : '1rpx solid rgba(255,255,255,0.1)'
            }">
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="all_popup" v-if="is_featured" @click.stop="closeFeatured" @touchmove.prevent.stop="closeFeatured">
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .fixeds {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    /* #ifdef H5 */
    left: 50%;
    transform: translateX(-50%);
    /* #endif */
  }

  .headerTitle {
    width: 750rpx;
    padding-bottom: 25rpx;

    .headerTitle_content {
      width: 750rpx;
      //min-height: 48rpx;
      position: relative;

      .headerTitle_image {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        top: 50%;
        left: 23rpx;
        transform: translateY(-50%);
      }

      .headerTitle_content_messageIcon {
        position: absolute;
        top: 50%;
        left: 35rpx;
        transform: translateY(-50%);

        .headerTitle_content_messageIcon_image {
          width: 46rpx;
          height: 46rpx;
        }

        .headerTitle_content_messageIcon_content_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18rpx;
          color: #292929;
        }
      }

      .headerTitle_content_home {
        position: absolute;
        left: 40rpx;
        top: 50%;
        transform: translateY(-50%);

        .headerTitle_content_home_image {
          width: 44rpx;
          height: 44rpx;
        }

        .headerTitle_content_home_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FF4206;
        }
      }

      .headerTitle_text {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 435rpx;
        overflow: hidden;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
      }
    }
  }

  .addIcon {
    position: absolute;
    /* #ifdef MP */
    left: 44rpx;
    /* #endif */
    /* #ifndef MP */
    right: 44rpx;
    /* #endif */
    top: 50%;
    transform: translateY(-50%);
    width: 38rpx;
    height: 38rpx;

    .tips_popup {
      width: 240rpx;
      //height: 390rpx;
      position: absolute;

      /* #ifdef MP */
      left: -20rpx;
      bottom: -495rpx;
      /* #endif */
      /* #ifndef MP */
      right: -20rpx;
      bottom: -395rpx;
      /* #endif */
      background: #4e4747;
      border-radius: 8rpx;
      z-index: 999999;

      &::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: 11rpx solid transparent;
        border-right: 11rpx solid transparent;
        border-bottom: 11rpx solid #4e4747;
        top: -11rpx;
        /* #ifdef MP */
        left: 15.5%;
        /* #endif */
        /* #ifndef MP */
        right: 7%;
        /* #endif */
        transform: translateX(-50%);
      }

      .list {
        width: 200rpx;

        image {
          width: 30rpx;
          height: 30rpx;
        }

        .title {
          width: 150rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
          padding: 27rpx 0;
        }
      }
    }

    .all_popup {
      position: fixed;
      width: 100vh;
      height: 100vh;
      top: 0;
      /* #ifdef MP */
      left: -44rpx;
      /* #endif */
      /* #ifndef MP */
      right: -44rpx;
      /* #endif */
      background: transparent;
    }
  }


</style>